@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

/*define some css variables*/
:root {
    --primary-text-color: #c4ccd5;
    --sidebar-background-color: #191924;
    --primary-background-color: white;
    --active-navigation-background-color: #4687ff;
    --active-nagivation-text-color: white;
}

.fi-sidebar, .fi-sidebar-header {
    background-color: var(--sidebar-background-color);
}

.fi-logo {
    color:white !important;
}

/*.fi-topbar nav, .fi-sidebar-item-active > .fi-sidebar-item-button {*/
/*    background-color: var(--active-navigation-background-color);*/
/*}*/

span.fi-topbar-item-label {
    color: white !important;
}

.fi-topbar-item-button > .fi-topbar-item-icon, .fi-topbar-item-button > .fi-icon-btn-icon {
    color: white !important;
}

.fi-sidebar-item-active > .fi-sidebar-item-button > .fi-sidebar-item-label, .fi-sidebar-item-active > .fi-sidebar-item-button > .fi-sidebar-item-icon {
    color: white !important;
}

/*.fi-topbar-item.fi-active > .fi-topbar-item-button {*/
/*    @apply bg-blue-800;*/
/*}*/

.fi-sidebar-item-button > .fi-sidebar-item-label {
    color: var(--primary-text-color);
}

.fi-sidebar-item-label:hover {
    color: var(--sidebar-background-color);
}

.fi-btn {
    background-color: var(--active-navigation-background-color);
    color: white;
}

.fi-btn:hover {
    background-color: #2e5bff;
    opacity: 0.8;
    color:white;
}

/*.fi-topbar-item-active > .fi-topbar-item-button {*/
/*    background-color: var(--active-navigation-background-color);*/
/*}*/

.fi-topbar-item-active > .fi-topbar-item-button > span.fi-topbar-item-label,
.fi-topbar-item-active >.fi-topbar-item-button > .fi-topbar-item-icon {
    color: var(--active-nagivation-text-color);
}

.fi-link .text-custom-600 {
    color: var(--active-navigation-background-color);
}

.gap-5 {
    gap: 15px;
}

.ring-custom-600 {
    --tw-ring-color: var(--active-navigation-background-color);
}

.blue-btn {
    @apply bg-blue-500 rounded text-white px-4 py-2 hover:bg-blue-300 text-sm;
}

/*.fi-topbar-item-button.hover\:bg-gray-50:hover {*/
/*    --tw-bg-opacity: 1;*/
/*    background-color: darkblue;*/
/*}*/

.text-primary-600 {
    @apply text-blue-600;
}
